<template>
  <div class="carbon-quota-management">
    <div class="sidebar">
      <a-menu mode="inline" v-model:selectedKeys="state.selectedKeys">
        <a-menu-item key="allocation">配额分配</a-menu-item>
        <a-menu-item key="usage">配额使用</a-menu-item>
        <a-menu-item key="trading">配额交易</a-menu-item>
        <a-menu-item key="report">报告审核</a-menu-item>
        <a-menu-item key="compliance">合规管理</a-menu-item>
      </a-menu>
    </div>

    <div class="main-content">
      <!-- <a-card title="碳配额分配" class="card">
        <a-form layout="vertical">
          <a-form-item label="年度分配">
            <a-input v-model:value="annualAllocation" placeholder="输入年度分配配额" />
          </a-form-item>
          <a-form-item label="历史转结">
            <a-input v-model:value="historicalTransfer" placeholder="输入历史转结配额" />
          </a-form-item>
          <a-form-item label="临时申请">
            <a-input
              v-model:value="temporaryApplication"
              placeholder="输入临时申请配额"
            />
          </a-form-item>
          <a-button type="primary" @click="submitAllocation" class="submit-button"
            >提交</a-button
          >
        </a-form>
      </a-card> -->

      <a-card title="碳配额使用记录" class="card">
        <a-table :dataSource="monthlyUsage" :columns="usageColumns" rowKey="month" />
      </a-card>

      <a-card title="碳配额交易记录" style="margin-left: 10px" class="card">
        <a-table :dataSource="tradingRecords" :columns="tradingColumns" rowKey="date" />
      </a-card>

      <a-card title="历史年度碳配额记录" class="cardd" style="width: 100%">
        <a-table :dataSource="annualRecords" :columns="annualColumns" rowKey="year" />
      </a-card>

      <!-- <a-card title="报告和审核" class="card">
        <a-button @click="exportReport" type="primary">年度使用报告导出</a-button>
        <a-button @click="uploadAuditReport" style="margin-left: 8px"
          >上传审核报告</a-button
        >
      </a-card>

      <a-card title="合规管理和风险预警" class="card">
        <a-button @click="checkCompliance" type="primary">合规核查</a-button>
      </a-card> -->
    </div>
  </div>
</template>

<script setup>
  import { h, reactive, computed, ref, onMounted } from 'vue';
  import { carbonAllowances } from '/@/api/Carbon module/Carbon asset module/Carbon asset project/carbonAllowances';
  import { smartSentry } from '/@/lib/smart-sentry';

  // 初始化状态和数据
  const annualAllocation = ref('');
  const historicalTransfer = ref('');
  const temporaryApplication = ref('');
  const state = reactive({
    selectedKeys: [],
  });
  const monthlyUsage = ref([
    { month: '1月', actualEmission: 200, usedQuota: 150 },
    { month: '2月', actualEmission: 180, usedQuota: 140 },
    { month: '3月', actualEmission: 220, usedQuota: 170 },
    { month: '4月', actualEmission: 210, usedQuota: 160 },
    { month: '5月', actualEmission: 190, usedQuota: 155 },
    { month: '6月', actualEmission: 200, usedQuota: 150 },
  ]);

  const tradingRecords = ref([
    { date: '2024-01-10', type: '买入', quantity: 50 },
    { date: '2024-02-15', type: '卖出', quantity: 30 },
    { date: '2024-03-20', type: '买入', quantity: 70 },
    { date: '2024-04-25', type: '卖出', quantity: 60 },
    { date: '2024-03-20', type: '买入', quantity: 70 },
    { date: '2024-04-25', type: '卖出', quantity: 60 },
  ]);

  const annualRecords = ref([]);
  const usageColumns = [
    { title: '月份', dataIndex: 'month', key: 'month', width: 190 },
    {
      title: '实际排放量 (吨)',
      dataIndex: 'actualEmission',
      key: 'actualEmission',
      width: 190,
    },
    { title: '使用配额 (吨)', dataIndex: 'usedQuota', key: 'usedQuota', width: 190 },
  ];

  const tradingColumns = [
    { title: '日期', dataIndex: 'date', key: 'date', width: 201 },
    { title: '买入/卖出', dataIndex: 'type', key: 'type', width: 201 },
    { title: '数量 (吨)', dataIndex: 'quantity', key: 'quantity', width: 201 },
  ];

  const annualColumns = [
    { title: '年度', dataIndex: 'years', key: 'years' },
    { title: '分配配额 (吨)', dataIndex: 'allocatedQuota', key: 'allocatedQuota' },
    {
      title: '临时申请 (吨)',
      dataIndex: 'temporaryQuota',
      key: 'temporaryQuota',
    },
    { title: '使用配额 (吨)', dataIndex: 'usedQuota', key: 'usedQuota' },
    { title: '转结 (吨)', dataIndex: 'carriedOverQuota', key: 'carriedOverQuota' },
    { title: '交易 (吨)', dataIndex: 'tradedQuota', key: 'tradedQuota' },
    { title: '描述', dataIndex: 'description', key: 'description' },
    { title: '碳配额资产', dataIndex: 'assetName' },
    { title: '月份', dataIndex: 'months', key: 'months' },
  ];
  // 事件处理函数
  const submitAllocation = () => {
    console.log('提交配额:', annualAllocation.value);
  };
  const exportReport = () => {
    console.log('导出年度使用报告');
  };
  const uploadAuditReport = () => {
    console.log('上传审核报告');
  };
  const checkCompliance = () => {
    console.log('合规核查');
  };

  // 查询碳信用列表
  const pagination = computed(() => ({
    total: total.value,
    pageSize: queryFormState.pageSize,
    current: queryFormState.pageNum,
    showTotal: (total) => `总共${total}项`,
  }));
  const queryFormState = reactive({
    pageNum: 1,
    pageSize: 10,
  });
  const tableLoading = ref(false);
  const total = ref(0); //总数
  const queryForm = reactive({ ...queryFormState });
  async function queryAnnualQuotaRecordsData() {
    tableLoading.value = true;
    try {
      queryForm.pageNum = queryFormState.pageNum; // 确保页码同步
      queryForm.pageSize = queryFormState.pageSize;
      let queryResult = await carbonAllowances.queryAnnualQuotaRecords(queryForm);
      annualRecords.value = queryResult.data.list;
      total.value = queryResult.data.total;
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      tableLoading.value = false;
    }
  }
  const handleChange = (pagination, filters, sorter) => {
    queryFormState.pageNum = pagination.current; // 更新当前页
    queryFormState.pageSize = pagination.pageSize; // 更新页大小
    queryAnnualQuotaRecordsData();
  };

  onMounted(() => {
    queryAnnualQuotaRecordsData();
  });
</script>

<style scoped>
  .carbon-quota-management {
    display: table;
  }

  .sidebar {
    display: table-cell;
    width: 256px;
    background-color: #f0f2f5;
    padding: 16px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    vertical-align: top; /* 确保左侧内容从顶部开始 */
    background-color: white;
  }

  .main-content {
    /* display: table-cell; */
    padding: 6px;
    padding-top: 1px;
    /* vertical-align: top; */
    display: flex;
    flex-wrap: wrap;
  }

  .card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 16px;
    margin-bottom: 6px;
  }
  .cardd {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 16px;
    margin-bottom: 6px;
  }
  .ant-input {
    width: 100%;
  }

  .ant-button {
    margin-top: 8px;
  }

  .ant-button + .ant-button {
    margin-left: 8px;
  }
</style>
